<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>Proactive</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="image/x-icon"/>
<!-- reset.css -->
<link rel="stylesheet" href="css/reset.css" media="screen">
<!-- Skeleton grid system -->
<link rel="stylesheet" href="css/skeleton.css" media="screen">
<!-- css -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- rwdmenu -->
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<!-- xmas 
<link rel="stylesheet" href="css/xmas.css" media="screen">-->
<!-- Layout and Media queries-->
<link rel="stylesheet" href="css/layout.css" media="screen">
<!-- font-awesome.css -->
<link rel="stylesheet" href="css/font-awesome.min.css" media="screen">
<script src="js/modernizr.custom.js"></script>
<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Mobile Specific Meta -->
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
	
<meta name="google-site-verification" content="xHADReXiYrS5XzEnSQ4ACpf6orC5D-QmTcuJozgg6SI" />
<meta name="msvalidate.01" content="D05E1782FEF56AA295AD3CA7FA4DFE90" />
</head>
<body class="welcomebody">

	<div id="page">
		<div class="header FixedTop">
			<a href="#menu" class="headericon"></a>
			<img src="images/logo.png" alt="proactive Logo">
		</div><!-- header -->
		<div class="content">
			<div class="list-screen clearfix">
				<div class="navfull">
					<div class="container">
						<div class="grid_12 neck-in">
                            <div class="logo"><a href="index">美編網</a></div>
							<ul class="topnav">
							<c:forEach items="${menuList}" var="menu">
								<li>
									<a href="${menu.url}" class="${menu.classString1}">
										${menu.icon}
										${menu.name}
									</a>
								</li>
							</c:forEach>	
							</ul>
							<ul class="login">
								<li><a href="register">註冊</a></li>
								<li><a href="login">登入</a></li>
							</ul>
                        </div>
					</div>
				</div>
			</div>

			<div class="rslidesWrap">
				<div class="rslidesWord">
					<div class="rslidesWordTitle">想要進入網頁設計這個領域卻不知從何下手嗎!?<br />踏入新手村帶你一窺網頁設計的全貌</div>
					<div class="rslidesWordBtn"><a href="http://www.proactive.tw/showWorksheet?id=18">新手勇者,馬上從零開始!</a><!-- <a href="##" class="sky">體驗新手課程</a> --></div>
				</div>


				<ul class="rslides">
				
				  <li><img src="images/background2.jpg" alt=""></li>
				  <li><img src="images/1.jpg" alt=""></li>
				  <li><img src="images/2.jpg" alt=""></li>
				  <li><img src="images/3.jpg" alt=""></li>
				</ul>				
			</div>


			<div class="hotissue">
					<div id="tab-container" class='tab-container'>
						<div class="container">
							<div class="grid_12">
								<header class="sectionHeader">
									<h2>學習 探索 更多精彩內容</h2>
									<p>學習好基礎語法，可以探索學習更多的應用。記得~學習完也要樂於分享自己會的酷炫技巧，你也可以上傳自己的作品，展示作品集記錄自己的成果!</p>								
								</header>
							</div>
						</div>					
						<ul class='etabs'>
						    <li class='tab'><a href="#tabs1">課程</a></li>
							<li class='tab'><a href="#tabs2">作品</a></li>
						    <li class='tab'><a href="#tabs3">學習單</a></li>
						    <li class='tab'><a href="#tabs4">設計資源</a></li>
						</ul>
						<div class='panel-container'>
						    <div id="tabs1" class="courseList">
						    	<div class="container">
									<ul>
									<c:forEach items="${courseList}" var="course">
										<li class="grid_3">
											<div class="courseBox">
												<a href="showCourse?id=${course.id}" class="courseBoxImg">
													<img src="https://s3-ap-northeast-1.amazonaws.com/proactive/${course.imagePath}">
												</a> 
												<a href="showCourse?id=${course.id}" title="${course.title}" class="courseBoxTitle">
													${course.title}
												</a>
												<ul class="tools clearfix">
													<li>
														<img src="images/view.png" class="view">
														<span>${course.viewCount}</span>
													</li>
													<li>
														<img src="images/cmnt.png" class="cmnt"> 
														<span>${course.commentCount}</span>
													</li>
													<li>
														<img src="images/like.png" class="like"> 
														<span>${course.favoriteCount}</span>
													</li>
													<c:if test="${course.downloadUrl != '' || course.fileUrl != ''}">
													<li class="attach">
														<a href="${course.isFile==1?course.downloadUrl:course.fileUrl}" target="_blank" class="pic_a"> 
															<img src="images/attach.png" class="attach">
															<img src="images/attach2.png" class="attach2">
														</a>
													</li>	
													</c:if>
												</ul>
											</div>
										</li>
									</c:forEach>
									</ul>																	
								</div>
							</div>
						    <div id="tabs2" class="courseList">
						    	<div class="container">
									<ul>
									<c:forEach items="${designList}" var="design">
										<li class="grid_3">
											<div class="courseBox">
												<a href="showDesign?id=${design.id}" class="courseBoxImg">
													<img src="https://s3-ap-northeast-1.amazonaws.com/proactive/${design.imagePath}">
												</a> 
												<a href="showDesign?id=${design.id}" title="${design.title}" class="courseBoxTitle ${design.practiceClass}">
													<c:if test="${design.isPractice == 1}">
														<img src="images/practice.png">
													</c:if>
													${design.title}
												</a>
												<ul class="tools clearfix">
													<li>
														<img src="images/view.png" class="view">
														<span>${design.viewCount}</span>
													</li>
													<li>
														<img src="images/cmnt.png" class="cmnt"> 
														<span>${design.commentCount}</span>
													</li>
													<li>
														<img src="images/like.png" class="like"> 
														<span>${design.favoriteCount}</span>
													</li>
													<c:if test="${design.downloadUrl != '' || design.fileUrl != ''}">
													<li class="attach">
														<a href="${design.isFile==1?design.downloadUrl:design.fileUrl}" target="_blank" class="pic_a"> 
															<img src="images/attach.png" class="attach">
															<img src="images/attach2.png" class="attach2">
														</a>
													</li>	
													</c:if>
												</ul>
											</div>
										</li>
									</c:forEach>
									</ul>
								</div>
						    </div>
						    <div id="tabs3">
						    	<div class="container seriesList">
									<ul class="container">
									<c:forEach items="${worksheetList}" var="worksheet">
										<li class="grid_6">
											<div class="courseBox">
												<a href="showWorksheet?id=${worksheet.id}" class="seriesTitle">
													${worksheet.title}
												</a>
												<p class="series">
													${worksheet.gist}
													<a href="showWorksheet?id=${worksheet.id}">閱讀更多</a>
												</p>
												<ul class="tools clearfix">
													<li>
														<img src="images/view.png" class="view">
														<span>${worksheet.viewCount}</span>
													</li>
													<li>
														<img src="images/cmnt.png" class="cmnt"> 
														<span>${worksheet.commentCount}</span>
													</li>
													<li>
														<img src="images/like.png" class="like"> 
														<span>${worksheet.favoriteCount}</span>
													</li>
													<li class="time"><span>發佈時間: ${worksheet.createDateString}</span></li>
												</ul>
											</div>
										</li>
									</c:forEach>
									</ul>
								</div>
						    </div>
						    <div id="tabs4" class="inspireList">
								<ul class="container">
								<c:forEach items="${resourceList}" var="resource">
									<li class="grid_3">
										<div class="courseBox">
											<div class="inspireHover">
												<ul class="list-screen-condition">
													<li class="social">
														<a href="#" class="topCollect" data-reveal-id="login">
				                                        	<img src="images/collect.png">
															<img src="images/collect2.png" class="collect2">
															<span>收藏</span>
				                                    	</a>
													</li>	
													<li class="fright"><a href="#" class="flag" data-reveal-id="login"></a></li>						
												</ul>
											</div>
											<a href="${resource.url}" class="courseBoxImg resource" data-id="${resource.id}" target="_blank">
												<img src="https://s3-ap-northeast-1.amazonaws.com/proactive/${resource.imagePath}">
											</a>
											<a href="${resource.url}" class="courseBoxTitle resource" data-id="${resource.id}" target="_blank">
												<h3>${resource.title}</h3>
												${resource.content}
											</a>
										</div>
									</li>
								</c:forEach>
								</ul>
						    </div>
						</div>
					</div>					

			</div><!-- hotissue -->
			<div class="hotissue2">
				<div>
					<div class="container">
						<div class="grid_12">
							<header class="sectionHeader">
								<h2>活躍學員</h2>							
							</header>
						</div>
						<c:forEach items="${memberList}" var="member">
							<div class="grid_2">
								<div class="hotMemberImg">
									<a href="aboutme?id=${member.memberNO}">
										<img src="${member.photoPath}">
									</a>
								</div>
								<div class="hotMemberInfo">
									<h3>${member.name}</h3>
									<span>${member.job}</span>
								</div>
							</div>
						</c:forEach>
					</div>			
				</div>	
			</div><!-- hotissue -->
			<!-- welcomeAboutus -->
			<div class="welcomeBlock">
				<div class="container">
					<div class="grid_12">
						<header class="sectionHeader">
							<h2>PROACTIVE 的誕生?</h2>							
						</header>
					</div>				
					<div class="grid_3"><img src="images/welcomegrid.png" alt=""></div>
					<div class="grid_9">
						<h3>PROACTIVE 誕生</h3>
						<span>why we create proactive</span>
						<p>
							我們從零開始學習網頁設計，一路上利用網路眾多的資源，與許多很棒的國外教程學習，但跌跌撞撞為了找到有用的資訊也花了不少時間探索，也發現網頁設計也不只是寫寫html+css，更還要考慮使用者經驗去規畫流程介面，是很大的一個坑。因此想透過PROACTIVE學習平台分享經驗也從別人的經驗上面學習，也讓要跨入網也設計的大家可以有方向的學習，更快上手!
						</p>
					</div>
				</div>
				<div class="container">
					<div class="grid_3"><img src="images/designs.png" alt=""></div>
					<div class="grid_9">
						<h3>你能創造的超乎你的想像</h3>
						<span>you can do it</span>
						<p>
							你正在探索自己的興趣潛能嗎?我們認為每個人的潛力無窮像是美感其實都是可以被挖掘與培養的!
							所以我們夢想著提供一個人人平等的分享平台，讓對於網頁設計有興趣，想嘗試的各行各業朋友們，
							可以有資源、有方法、在這找到志同道合的朋友學習成長。歡迎你加入我們的行列
						</p>
					</div>
				</div>
				<div class="container">
					<div class="grid_3"><img src="images/welcomecreat.png" alt=""></div>
					<div class="grid_9">
						<h3>課程、作品、學習單、設計資源</h3>
						<span>Let's share our experience in webdesign !</span>
						<p>
							創建你的課程/分享你的作品/將你的學習路徑製成一份學習單/分享你知道的設計資源，積極主動，
							每個人都可以是老師是學生，讓對於網頁設計有興趣，想嘗試的各行各業朋友們，
							在proactive平台有資源、有方法、找到志同道合的朋友學習成長吧。歡迎你加入我們的行列，給想跨入網頁設計的朋友一個學習分享認識朋友的地方!
						</p>
					</div>
				</div>
			</div>
			<footer class="footerbwrap">
				<div class="container">
					<div class="grid_12">
						<span>©2014 PROACTIVE </span> 
						<a href="https://www.facebook.com/pages/Proactive/579983748802096"><img src="images/icon_fb.png" alt="proactive facebook粉絲頁"></a>
						<a href="https://www.youtube.com/channel/UC4SGQg8Qjj5YcgOmopSmk0g"><img src="images/icon_youtube.png" alt="proactive egroup youtube頻道"></a>
					</div>
				</div>
			</footer>
	    </div><!-- content -->

		<!-- 左側meum滑出 -->
		<nav id="menu">
			<ul>		 
				<li class="logo"><a href="index">美編網</a></li>
				<c:forEach items="${menuList}" var="menu">				
				<li class="${menu.classString2}">
					<a class="${menu.classString1}" href="${menu.url}">${menu.icon}${menu.name}</a>
				</li>
				</c:forEach> 		
				<li class="menumember"><a href="register">註冊</a></li>
				<li class="menumember"><a href="login">登入</a></li>
			</ul>
		</nav>
	</div><!-- page -->
	
	<div id="login" class="reveal-modal">
		<div class="cont clearfix">
			<div class="textaligncenter">
				<h1>會員登入</h1>
				<p class="textGray">使用facebook帳號快速登入</p>
				<button class="btn_fb-login" type="button" onclick="window.location.href='fbLogin'"> Facebook 登入</button>
				<p class="pmaillogin"><span>或</span></p>
			</div>
			<form style="text-align: center;" id="loginForm" method="post" action="checkLogin">
				<label><input type="text" class="textbox account" name="account" placeholder="請輸入帳號"></label><br>
				<label><input type="password" class="textbox key" name="password" placeholder="請輸入密碼"></label><br>
				<button class="btn_login">登入</button><br>				
				<button type="button" class="poplink" onclick="window.location.href='forgetPassword'">忘記密碼</button>
				<button type="button" class="poplink" onclick="window.location.href='register'">成為會員</button><br>
			</form>
		</div>
	</div>
	
	<!-- 
	<div id="login" class="reveal-modal">
		<header class="reveal-modal-header">
			<p style="text-align: center;">
				<strong style="font-size: 28px;">登入</strong>
				<img class="pop_logo" alt="pop_logo" src="images/pop_logo.png">
			</p>
		</header>
		<div class="cont clearfix">
			<form style="text-align: center;" id="loginForm" method="post" action="checkLogin"> 
				<button class="btn_fb-login" type="button" onclick="">使用 Facebook 快速登入</button>
				<p><br />或使用信箱登入</p>
				<label><input type="text" placeholder="請輸入帳號" class="textbox account" name="account"></label><br>
				<label><input type="password" placeholder="請輸入密碼" class="textbox key" name="password"></label><br>
				<a href="forgetPassword" style="padding-left: 70px;margin-top: 10px;display: inline-block;">忘記密碼</a>
				<a href="register">成為會員</a><br>
				<button class="btn_login">登入</button>
			</form>
		</div>
	</div>
	 -->
	
	<!-- import jquery -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>



	<!-- some jquery method we use -->
	<script src="js/hoverjquery.js"></script>
	<script src="js/listscreen.js"></script>	
	<script src="js/ourjquery.js"></script>	
	<script type="text/javascript" src="js/rwdmenu_main.js"></script>
	<!-- validate -->
    <script src="js/jquery.validate.js"></script>
    <script src="js/messages_zh_TW.js"></script>
    <script src="js/additional-methods.js"></script>   
	<!-- tab-container -->
  	<script src="js/jquery.hashchange.min.js"></script>
 	<script src="js/jquery.easytabs.min.js"></script>	  
	<!-- rwdmenu -->
	<script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>
	<!-- common -->
    <script src="js/common.js"></script>	
  	<script src="js/responsiveslides.min.js"></script>
	<!-- Reveal Modal -->
	<script type="text/javascript" src="js/jquery.reveal.js"></script>	
  	<script>
		$(function() {
			$('#tab-container').easytabs({
				updateHash: false
			});
			$('nav#menu').mmenu();
		    $(".rslides").responsiveSlides();
		    
			$("#loginForm").validate({
				rules:{
					account:"required",
					password:"required"
				}
			});
		});
	</script>
</body>
</html>